import { useTranslations } from 'next-intl';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Mail, Phone, MapPin, Clock, Send, MessageSquare } from 'lucide-react';

export default function ContactPage() {
  const t = useTranslations('common');

  const contactInfo = [
    {
      icon: Mail,
      label: '邮箱地址',
      value: 'contact@enterprise-template.com',
      color: 'text-blue-600',
    },
    {
      icon: Phone,
      label: '联系电话',
      value: '+86 400-123-4567',
      color: 'text-green-600',
    },
    {
      icon: MapPin,
      label: '公司地址',
      value: '北京市朝阳区科技园区创新大厦 888 号',
      color: 'text-orange-600',
    },
    {
      icon: Clock,
      label: '工作时间',
      value: '周一至周五 9:00-18:00',
      color: 'text-purple-600',
    },
  ];

  const offices = [
    {
      city: '北京总部',
      address: '朝阳区科技园区创新大厦 888 号',
      phone: '+86 400-123-4567',
      email: 'beijing@enterprise-template.com',
    },
    {
      city: '上海分公司',
      address: '浦东新区金融中心商务楼 666 号',
      phone: '+86 400-123-4568',
      email: 'shanghai@enterprise-template.com',
    },
    {
      city: '深圳分公司',
      address: '南山区科技园高新大厦 777 号',
      phone: '+86 400-123-4569',
      email: 'shenzhen@enterprise-template.com',
    },
  ];

  return (
    <div className="space-y-12 px-4 py-8">
      {/* Page Header */}
      <section className="mx-auto max-w-4xl text-center">
        <h1 className="mb-6 text-4xl font-bold md:text-5xl">{t('contact')}</h1>
        <p className="text-muted-foreground text-xl">
          我们随时准备为您提供专业的企业级解决方案咨询服务
        </p>
      </section>

      <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-2">
        {/* Contact Form */}
        <Card className="p-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-2xl">
              <MessageSquare className="text-primary h-6 w-6" />
              发送消息
            </CardTitle>
          </CardHeader>
          <CardContent>
            <form className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <label className="mb-2 block text-sm font-medium">
                    姓名 *
                  </label>
                  <input
                    type="text"
                    className="border-input focus:ring-ring w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
                    placeholder="请输入您的姓名"
                    required
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium">
                    公司名称
                  </label>
                  <input
                    type="text"
                    className="border-input focus:ring-ring w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
                    placeholder="请输入公司名称"
                  />
                </div>
              </div>

              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <label className="mb-2 block text-sm font-medium">
                    邮箱地址 *
                  </label>
                  <input
                    type="email"
                    className="border-input focus:ring-ring w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
                    placeholder="your@email.com"
                    required
                  />
                </div>
                <div>
                  <label className="mb-2 block text-sm font-medium">
                    联系电话
                  </label>
                  <input
                    type="tel"
                    className="border-input focus:ring-ring w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
                    placeholder="请输入联系电话"
                  />
                </div>
              </div>

              <div>
                <label className="mb-2 block text-sm font-medium">
                  咨询类型
                </label>
                <select className="border-input focus:ring-ring w-full rounded-md border px-3 py-2 focus:outline-none focus:ring-2">
                  <option>产品咨询</option>
                  <option>技术支持</option>
                  <option>商务合作</option>
                  <option>其他问题</option>
                </select>
              </div>

              <div>
                <label className="mb-2 block text-sm font-medium">
                  详细描述 *
                </label>
                <textarea
                  rows={6}
                  className="border-input focus:ring-ring w-full resize-none rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
                  placeholder="请详细描述您的需求或问题..."
                  required
                ></textarea>
              </div>

              <Button type="submit" className="w-full" size="lg">
                <Send className="mr-2 h-4 w-4" />
                {t('submit')}
              </Button>
            </form>
          </CardContent>
        </Card>

        {/* Contact Information */}
        <div className="space-y-6">
          {/* Contact Methods */}
          <Card className="p-6">
            <CardHeader>
              <CardTitle className="text-2xl">联系方式</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {contactInfo.map((info, index) => {
                  const Icon = info.icon;
                  return (
                    <div key={index} className="flex items-start gap-4">
                      <div
                        className={`bg-muted flex h-12 w-12 items-center justify-center rounded-lg`}
                      >
                        <Icon className={`h-5 w-5 ${info.color}`} />
                      </div>
                      <div>
                        <h3 className="mb-1 font-semibold">{info.label}</h3>
                        <p className="text-muted-foreground">{info.value}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          {/* Response Time */}
          <Card className="p-6">
            <CardHeader>
              <CardTitle className="text-xl">响应时间</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span>电话咨询</span>
                  <span className="font-medium text-green-600">即时响应</span>
                </div>
                <div className="flex justify-between">
                  <span>邮件回复</span>
                  <span className="font-medium text-blue-600">2小时内</span>
                </div>
                <div className="flex justify-between">
                  <span>技术支持</span>
                  <span className="font-medium text-orange-600">4小时内</span>
                </div>
                <div className="flex justify-between">
                  <span>商务洽谈</span>
                  <span className="font-medium text-purple-600">24小时内</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Office Locations */}
      <section className="mx-auto max-w-6xl">
        <h2 className="mb-12 text-center text-3xl font-bold">办公地点</h2>
        <div className="grid gap-6 md:grid-cols-3">
          {offices.map((office, index) => (
            <Card key={index} className="p-6 transition-shadow hover:shadow-lg">
              <CardHeader>
                <CardTitle className="text-center text-xl">
                  {office.city}
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-center">
                <div className="flex items-start gap-2">
                  <MapPin className="text-muted-foreground mt-1 h-4 w-4 flex-shrink-0" />
                  <span className="text-muted-foreground text-sm">
                    {office.address}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="text-muted-foreground h-4 w-4" />
                  <span className="text-sm">{office.phone}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Mail className="text-muted-foreground h-4 w-4" />
                  <span className="text-sm">{office.email}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Map Placeholder */}
      <section className="mx-auto max-w-6xl">
        <Card className="p-6">
          <CardHeader>
            <CardTitle className="text-center text-2xl">找到我们</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="bg-muted flex h-96 items-center justify-center rounded-lg">
              <div className="text-center">
                <MapPin className="text-muted-foreground mx-auto mb-4 h-12 w-12" />
                <p className="text-lg font-medium">交互式地图</p>
                <p className="text-muted-foreground text-sm">
                  这里可以集成 Google Maps 或高德地图
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}
